<template>
  <div class="main-contianer3 task-manage">
    <div v-if="!isShowTaskRate">
      <el-form :inline="true" class="inline-form">
        <el-form-item>
          <el-input v-model="keyword" placeholder="请输入任务名称关键字"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button @click="resetForm">重置</el-button>
          <el-button @click="addTask">发布任务</el-button>
        </el-form-item>
      </el-form>
      <div class="tabel">
        <InsTable
        tableHeight="800"
        :index="true"
        :table-head="tableHead"
        :table-data="tableData">
          <!-- 自定义列 操作 -->
          <el-table-column slot="opera" slot-scope="headScope"  fixed="right" align="center" :label="headScope.head.label">
            <template slot-scope="scope">
              <span @click="viewTask(scope.row)" style="cursor: pointer;">{{scope.row.taskStatus == '1' ? '编辑任务' : scope.row.taskStatus == '2' ? '查看任务' : '-'}}</span>
            </template>
          </el-table-column>
        </InsTable>
      </div>
    </div>
    <div v-else>
      <TaskRate @back="isShowTaskRate=false" :editTask="editTask"></TaskRate>
    </div>
    <!-- 新增任务 -->
    <el-dialog
      :title="editTask.id ? '编辑任务' : '新增任务'"
      :center="true"
      :close-on-click-modal="false"
      :destroy-on-close="true"
      width="800px"
      :visible.sync="isShowAdd"
      class="add-student"
    >
    <el-form :model="addForm" :rules="rules" ref="addForm" label-width="100px" class="add-form">
      <el-form-item label="任务名称" prop="taskTitle">
        <el-input v-model="addForm.taskTitle"></el-input>
      </el-form-item>
      <el-form-item label="任务类型" prop="taskType">
        <el-select v-model="addForm.taskType" placeholder="请选择任务类型">
          <el-option label="学习" value="1"></el-option>
          <el-option label="测验" value="2"></el-option>
          <el-option label="作业" value="3"></el-option>
          <el-option label="其他" value="4"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="班级选择" prop="classIds">
        <el-select disabled v-model="addForm.classIds" placeholder="请选择班级选择">
          <el-option v-for="(item, index) of this.classList" :key="index" :label="item.className" :value="item.classId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="任务说明" prop="taskRemark">
        <el-input
          type="textarea"
          :rows="5"
          placeholder="请输入任务说明"
          v-model="addForm.taskRemark">
        </el-input>
      </el-form-item>
      <el-form-item label="上传报告" prop="isRequestReport">
        <el-radio-group v-model="addForm.isRequestReport">
          <el-radio :label="'2'">要求上传报告</el-radio>
          <el-radio :label="'1'">不要求上传报告</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="上传附件" prop="files">

      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(1)">保存</el-button>
        <el-button @click="submitForm(2)">发布</el-button>
        <el-button @click="submitForm(3)" v-if="this.editTask.id">撤回</el-button>
      </el-form-item>
    </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { taskIndex, saveTask, reCallTask, editTask } from '@/api/teacher/course/task'
import InsTable from '@/components/InsTable'
import TaskRate from './TaskRate'

export default {
  name: 'index',
  data () {
    return {
      editTask: {
        id: '',
        taskType: ''
      },
      taskRate: null,
      isShowRate: false,
      keyword: '',
      isShowTaskRate: false,
      tableHead: [
        {
          label: '任务类型', prop: 'taskTypeName'
        }, {
          label: '任务名称', prop: 'taskTitle'
        }, {
          label: '发布时间', prop: 'publishedTime'
        }, {
          label: '进度/%', prop: 'finishedRate'
        }, {
          label: '状态', prop: 'taskStatusName'
        }, {
          label: '操作', prop: 'opera', isSlot: true
        }
      ],
      tableData: [],
      isShowAdd: false,
      addForm: {
        taskTitle: '',
        taskType: '',
        classIds: '',
        files: "[{fileUrl:'1',fileName:'1'},{fileUrl:'2',fileName:'2'}]",
        taskRemark: '',
        isRequestReport: ''
      },
      rules: {
        taskTitle: [
          { required: true, message: '请输入任务名称', trigger: 'blur' }
        ],
        taskType: [
          { required: true, message: '请选择任务类型', trigger: 'change' }
        ],
        taskRemark: [
          { required: true, message: '请填写任务说明', trigger: 'blur' }
        ],
        isRequestReport: [
          { required: true, message: '请选择是否需要上传报告', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters([
      'loginInfo',
      'classList'
    ])
  },
  components: {
    InsTable,
    TaskRate
  },
  mounted () {
    this.taskIndex()
    this.addForm.classIds = this.loginInfo.classId
  },
  methods: {
    onSubmit () {
      if (!this.keyword) {
        return this.$message.warning('请输入关键字')
      }
      this.taskIndex()
    },
    resetForm () {
      this.keyword = ''
      this.taskIndex()
    },
    // 获取任务列表
    async taskIndex () {
      const res = await taskIndex({
        taskTitle: this.keyword
      })
      if (res.code === '200') {
        this.tableData = res.data.taskList
      } else {
        this.$message.error(res.message)
      }
    },
    // 编辑任务
    async viewTask (row) {
      Object.assign(this.editTask, {
        id: row.id,
        taskType: row.taskType
      })
      if (row.taskStatus === '1') {
        // 编辑任务
        const res = await editTask(this.editTask)
        if (res.code === '200') {
          Object.assign(this.addForm, {
            taskTitle: res.data.taskTitle,
            taskType: res.data.taskType,
            classIds: res.data.classIds,
            files: res.data.files,
            taskRemark: res.data.taskRemark,
            isRequestReport: res.data.isRequestReport
          })
          this.isShowAdd = true
        } else {
          this.$message.error(res.message)
        }
      } else if (row.taskStatus === '2') {
        this.isShowTaskRate = true
      }
    },
    // 新增任务弹窗
    addTask () {
      this.editTask = {
        id: '',
        taskType: ''
      }
      this.addForm = {
        taskTitle: null,
        taskType: null,
        classIds: null,
        files: "[{fileUrl:'1',fileName:'1'},{fileUrl:'2',fileName:'2'}]",
        taskRemark: null,
        isRequestReport: null
      }
      this.isShowAdd = true
    },
    async submitForm (type) {
      // 1 保存 2 发布  3 撤回
      if (type === 3) {
        if (!this.editTask.id) {
          return this.$message.error('任务不存在')
        }
        const res = await reCallTask(this.editTask)
        if (res.code === '200') {
          this.$message.success('撤回成功')
          this.isShowAdd = false
          this.taskIndex()
        } else {
          this.$message.error(res.message)
        }
      } else {
        this.$refs['addForm'].validate(async (valid) => {
          if (valid) {
            if (this.editTask.id) {
              Object.assign(this.addForm, {
                id: this.editTask.id
              })
            }
            Object.assign(this.addForm, {
              taskStatus: type
            })
            const res = await saveTask(this.addForm)
            if (res.code === '200') {
              const text = type === '2' ? '发布成功' : '保存成功'
              this.$message.success(text)
              this.isShowAdd = false
              this.taskIndex()
            } else {
              this.$message.error(res.message)
            }
          } else {
            return false
          }
        })
      }
    }
  }
}
</script>
<style scoped lang="scss">
.task-manage {
  position: relative;
  .inline-form {
    text-align: right;
  }

}
</style>
